<template>
	<view class="company-tab flex justify-center bg-white text-center">
		<view 
			v-for="(item,index) in title" 
			:class="[{'active':active==index},'padding']"
			@click="handleTab(index)"
		>
			{{item}}
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

interface PropType {
	title:Array<string>
}
withDefaults(
	defineProps<PropType>(),
	{
		title:()=>['关于','职位']  //需要使用函数返回对象，避免组件反复调用导致对象互相影响
	}
)
const active = ref<number>(0)
const model = defineModel<number>() 
const handleTab = (idx:number)=>{
	active.value = idx
	model.value = idx
}
</script>

<style lang="scss">
.company-tab{
	border-bottom: 1upx solid #eee;
	view{
		width: 50%;
	}
	.active{
		border-bottom: 2px solid #FD7753;
		color:#FD7753;
	}
}   	       
</style>
